import React from "react";

import {HashRouter, Route, Link, Switch} from "react-router-dom";
import ReactDOM from "react-dom";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import Dialog from "./portal"

const PlayerAPI = {
    players: [
        {number: 1, name: "Ben Blocker", position: "G"},
        {number: 2, name: "Dave Defender", position: "D"},
        {number: 3, name: "Sam Sweeper", position: "D"},
        {number: 4, name: "Matt Midfielder", position: "M"},
        {number: 5, name: "William Winger", position: "M"},
        {number: 6, name: "Fillipe Forward", position: "F"}
    ],
    all: function () {
        return this.players
    },
    get: function (id) {
        const isPlayer = p => p.number === id;
        console.log(isPlayer);
        return this.players.find(isPlayer);
    }
};


const Player = (props) => {
    const player = PlayerAPI.get(
        parseInt(props.match.params.number, 10)
    );
    if (!player) {
        return <div>Sorry, but the player was not found</div>
    }
    return (
        <div>
            <h1>{player.name} (#{player.number})</h1>
            <h2>Position: {player.position}</h2>
            <Link to='/roster'>Back</Link>
        </div>
    )
};

const Roster = () => (
    <Switch>
        <Route path='/roster/:number' component={Player}/>
    </Switch>
);

const Schedule = () => (
    ReactDOM.render(<div>
        <ul>
            <li>6/5 @ Evergreens</li>
            <li>6/8 vs Kickers</li>
            <li>6/14 @ United</li>
        </ul>
    </div>, document.getElementById('root'))
);

const Home = () => (
    <div>
        <h1>Welcome to the Tornadoes Website!</h1>
    </div>
);

const Main = () =>
    (
        <main>
            <Switch>
                <Route exact path='/' component={Home}/>
                <Route path='/roster' component={Roster}/>
                <Route path='/schedule' component={Schedule}/>
            </Switch>
        </main>
    );


export default class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isOpen: false, showDialog: false};
        this.navToggle = React.createRef();
        this.isOpenHandler = this.isOpenHandler.bind(this);
        this.dialogHandler = this.dialogHandler.bind(this);
        this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);
    }

    componentDidMount() {
        window.addEventListener('click', this.onClickOutsideHandler);
    }

    componentWillUnmount() {
        window.removeEventListener('click', this.onClickOutsideHandler);
    }

    isOpenHandler() {
        this.setState(currentState => ({
            isOpen: !currentState.isOpen
        }));
    }

    dialogHandler() {
        if (this.state.showDialog) {
            $('body').css('overflow','hidden');
        }
        this.setState(currentState => ({
            showDialog: !currentState.showDialog
        }));
    }

    onClickOutsideHandler(event) {
        if (this.state.isOpen && !this.navToggle.current.contains(event.target)) {
            this.setState({isOpen: false});
        }
    }

    FullRoster() {
        return this.state.isOpen &&
            //<ReactCSSTransitionGroup>
            <ul className='full_roster'>
                {
                    PlayerAPI.all().map(p => (
                        <Link to={`/roster/${p.number}`}>
                            <li key={p.number}>
                                {p.name}
                            </li>
                        </Link>
                    ))
                }
            </ul>

    }

    Header() {
        return (
            <header>
                <nav>
                    <ul>
                        <Link to='/'>
                            <li className='one_menu'>Home</li>
                        </Link>
                        <li className='one_menu' onClick={this.isOpenHandler} ref={this.navToggle}>Roster
                            <ReactCSSTransitionGroup
                                transitionName="example"
                                transitionAppear={true}
                                transitionAppearTimeout={500}>
                                {this.FullRoster()}
                            </ReactCSSTransitionGroup>
                        </li>
                        <Link to='/schedule' target="_blank">
                            <li className='one_menu'>Schedule</li>
                        </Link>
                        <li className='one_menu' onClick={this.dialogHandler}>dialog
                            {this.state.showDialog && <Dialog children={'hello'}/>
                            }
                        </li>
                    </ul>
                </nav>
            </header>
        )
    }

    render() {
        return (
            <React.Fragment>
                <h3>ROUTER</h3>
                <HashRouter>
                    <React.Fragment>
                        {this.Header()}
                        <Main/>
                    </React.Fragment>
                </HashRouter>
            </React.Fragment>
        )
    }

}
;
